<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>deepMapKeys</title>
</head>

<body>
    <script>
        const deepMapKeys = (obj, handler) =>
            Array.isArray(obj)
                ? obj.map(val => deepMapKeys(val, handler))
                : typeof obj === 'object'
                    ? Object.keys(obj).reduce((acc, cur) => {
                        const key = handler(cur);
                        const val = obj[cur];
                        acc[key] =
                            val !== null && typeof val === 'object'
                                ? deepMapKeys(val, handler)
                                : val;
                        return acc;
                    }, {})
                    : obj;
        const obj = {
            foo: '1',
            nested: {
                child: {
                    withArray: [
                        {
                            grandChild: ['hello']
                        }
                    ]
                }
            }
        };
        const upperKeysObj = deepMapKeys(obj, key => key.toUpperCase());
        document.writeln(JSON.stringify(upperKeysObj));
    </script>
</body>

</html>